import React, { useEffect } from 'react'
import { NavBar } from 'antd-mobile'
import { useNavigate, useParams, useLocation } from 'react-router-dom'
import styles from './addAddress.module.scss'
import { Area, Field } from 'react-vant';
import { areaList } from '@vant/area-data'
import { getaddAddress, getEditAddress, getSingleAddress, type AddressData, getDeleteAddress } from '../../api/ressService'
import {
    Form,
    Input,
    Button,
    Switch,
} from 'antd-mobile'
const Index = () => {
    const nav = useNavigate()
    const { flag } = useParams() // 获取路由参数 flag
    const location = useLocation() // 获取 location 对象
    const [form] = Form.useForm() // Form 实例
    const [areaText, setAreaText] = React.useState('')      // 省/市/区 文本
    const [value, setValue] = React.useState(['220000', '220300', '220303'])
    const [loading, setLoading] = React.useState(false)     // 加载状态
    const [editAddressData, setEditAddressData] = React.useState<AddressData | null>(null) // 编辑的地址数据
    // 判断是新增还是修改模式
    const isEdit = flag === 'true' || flag === 'edit' // 支持 'true' 或 'edit' 作为修改标识
    // 获取地址ID（从路由参数或location.state获取）
    const addressId = location.state?.addressId || location.state?.addressData?.id
    // 获取单个地址数据用于回显
    useEffect(() => {
        const fetchAddressData = async () => {
            if (isEdit && addressId) {
                setLoading(true)
                try {
                    const res = await getSingleAddress(addressId)
                    console.log('获取到的地址数据:', res)
                    if (res && res.data) {
                        const addressData = res.data
                        setEditAddressData(addressData)
                        // 回显表单数据
                        form.setFieldsValue({
                            nickname: addressData.nickname,
                            tel: addressData.tel,
                            detail_address: addressData.detail_address,
                            delivery: addressData.delivery || false
                        })
                        // 回显地区数据
                        if (addressData.provice_city_area) {
                            setAreaText(addressData.provice_city_area)
                            // 这里需要根据中文名称反向查找对应的code
                            // 暂时使用默认值，实际项目中可能需要更复杂的映射逻辑
                        }
                    }
                } catch (error) {
                    console.error('获取地址数据失败:', error)
                } finally {
                    setLoading(false)
                }
            }
        }
        fetchAddressData()
    }, [isEdit, addressId, form])
    const onFinish = async (values: any) => {
        // 将可能为数组的地区值转换为字符串；若表单未收集，则使用 Area 生成的 areaText
        const provice_city_area = areaText
        // 经/纬度优先取表单值，其次取本地状态，转换为字符串
        const payload: any = {
            tel: values.tel,                  // 手机
            nickname: values.nickname,        // 姓名
            provice_city_area,                // 省/市/区 字符串（注意后端拼写是 provice）
            detail_address: values.detail_address, // 详细地址
            longitude: '12223',                        // 经度 string
            latitude: '12223',                         // 纬度 string
        }
        // 如果是修改模式，添加地址ID
        if (isEdit && editAddressData) {
            payload.id = editAddressData.id // 添加地址ID用于更新
            console.log('修改地址模式，地址数据:', editAddressData)
            console.log('修改地址payload:', payload)
        }
        try {
            if (isEdit) {
                // 修改地址使用 getEditAddress，传递地址ID
                await getEditAddress(payload)
            } else {
                // 新增地址使用 getaddAddress
                await getaddAddress(payload)
            }
            alert(isEdit ? '修改地址成功' : '新增地址成功')
            nav('/address')
        } catch (error) {
            console.error('保存地址失败:', error)
            alert('保存失败，请重试')
        }
    }
    const handleDelete = async () => {
        if (!addressId) {
            alert('地址ID不存在，无法删除')
            return
        }

        const confirmed = window.confirm('确定要删除这个地址吗？')
        if (confirmed) {
            try {
                await getDeleteAddress(addressId)
                alert('删除成功')
                nav('/address')
            } catch (error) {
                console.error('删除地址失败:', error)
                alert('删除失败，请重试')
            }
        }
    }
    return (
        <div className={styles.addAddressbox}>
            <NavBar onBack={() => nav(-1)} className={styles.nav}>
                {isEdit ? '修改地址' : '新增地址'}
            </NavBar>
            <div className={styles.addAddressitem}>
                {loading && (
                    <div style={{ textAlign: 'center', padding: '20px' }}>
                        加载中...
                    </div>
                )}
                <Form
                    form={form}
                    className={styles.addAddressForm}
                    layout='horizontal'
                    onFinish={onFinish}
                    footer={
                        <div>
                            <Button block type='submit' color='primary' size='large'
                                className={styles.addAddressFormBtn}
                            >
                                {isEdit ? '保存修改' : '保存'}
                            </Button>
                            {isEdit && (
                                <Button block size='large' className={styles.deleteBtn} onClick={handleDelete}>
                                    删除
                                </Button>
                            )}
                        </div>

                    }
                >
                    <Form.Item
                        className={styles.addAddressFormItem}
                        name='nickname'
                        label='姓名'
                    >
                        <Input onChange={console.log} placeholder='请输入姓名' />
                    </Form.Item>
                    <Form.Item
                        className={styles.addAddressFormItem}
                        name='tel'
                        label='电话'
                    >
                        <Input onChange={console.log} placeholder='请输入电话' />
                    </Form.Item>
                    <Form.Item
                        className={styles.addAddressFormItem}
                        name='provice_city_area'
                        label='地区'
                        trigger='onConfirm'
                    >
                        <Area
                            popup={{ round: true }}
                            value={value}
                            areaList={areaList}
                            onConfirm={(vals) => {
                                // 将选中的省/市/区 code 映射为中文名称
                                const [p, c, d] = vals as string[]
                                const province = areaList.province_list[p] || ''   // 例如 '110000' -> '北京市'
                                const city = areaList.city_list[c] || ''       // 例如 '110100' -> '北京市'
                                const county = areaList.county_list[d] || ''     // 例如 '110105' -> '朝阳区'
                                // 保存选中 code
                                setValue(vals as string[])
                                // 供提交使用的字符串，如 '北京市/北京市/朝阳区'
                                setAreaText([province, city, county].filter(Boolean).join('/'))
                            }}
                        >
                            {(_, selectRows, actions) => (
                                <Field
                                    value={selectRows.length ? selectRows.map(r => r?.text).join('/') : ''}
                                    placeholder='选择省 / 市 / 区'
                                    readOnly
                                    onClick={() => actions.open()}
                                />
                            )}
                        </Area>

                    </Form.Item>
                    <Form.Item
                        className={styles.addAddressFormItem}
                        name='detail_address'
                        label='详细地址'
                    >
                        <Input onChange={console.log} placeholder='街道门牌、楼层房间号等信息' />
                    </Form.Item>
                    <Form.Item
                        className={styles.addAddressFormItem}
                        name='delivery'
                        label='设为默认地址'
                        valuePropName="checked"
                        childElementPosition='right'
                    >
                        <Switch />
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}

export default Index
